<template>
    <div class="page-top">
        <img class="page-top-bg" src="../assets/imgx/header.png" />
        <div class="title">{{ title }}</div>
        <div class="page-top-settings" @click="settingsClick">
            <span v-if="token" v-show="roles != 'operator'">
                <img class="page-top-settings-bg" src="../assets/imgx/settings_btn.png">

                设置</span>

            <span v-else>
                <img class="page-top-settings-bg" src="../assets/imgx/settings_btn.png">
                登录</span>


        </div>
        <div class="data-settings" @click="dataClick">
            <span v-if="token" v-show="roles != 'operator'">
                <img class="page-top-settings-bg" src="../assets/imgx/settings_btn.png">数据统计</span>
        </div>


        <div class="page-top-profile" v-if="token" :style="{ 'cursor': 'pointer' }">
            <img src="../assets/imgx/userheader.png" alt="">
            <span :style="{ 'margin-left': '5px', 'color': 'white' }">{{ username }}</span>
            <span :style="{ 'margin-left': '10px' }" @click="exitFun">退出</span>
        </div>
    </div>
</template>

<script>

import { mapGetters } from 'vuex'
const { setCookie, getCookie } = require('@/components/Login/cookie')

export default {
    data() {
        return {
            title: "",
            roles: "",
        }
    },
    computed: {
        ...mapGetters(["username", "token", "equipmentName"])
    },
    mounted() {

        this.title = this.$store.state.UserIndex.equipment.equipmentName



        this.func1()

    },


    methods: {

        func1() {
            this.roles = this.$store.state.Userindex.roles[0];
            console.log(this.roles);
        },
        settingsClick() {
            if (this.token) {
                this.$router.push("/settings")
            } else {
                this.$emit('LogInModelMask')
            }
        },
        dataClick() {
            if (this.token) {
                this.$router.push("/statistics")
            } else {
                this.$emit('LogInModelMask')
            }
        },
        exitFun() {
            this.$cookies.remove("token")
            this.$router.push("/")
            this.$store.dispatch("logout")
            this.func1()

        },
        onLogin() {
            this.$router.push("/login")

        },
    },
    watch: {

        '$store.state.Userindex.roles': {
            deep: true,
            handler: function (new1, olb1) {

                this.roles = new1[0]
            }
        },

    },
}
</script>
<style lang="less" scoped>
.page-top {
    width: 1910px !important;
    position: relative;
    font-size: 18px;

    .title {
        height: 34px;
        text-align: center;
        letter-spacing: 12px;
        font-size: 24px;
        line-height: 34px;
        position: absolute;
        top: 0;
        left: 41%;
        color: #fff;
        font-family: "思源黑体", "Microsoft YaHei";
        width: 384px
    }

    .page-top-bg {
        width: 1910px;
    }

    .page-top-settings {
        position: absolute;
        top: 2px;
        left: 70%;
        width: 130px;
        line-height: 30px;
        text-align: center;
        font-weight: normal;
        font-size: 15px;
        color: #ffffff;
        font-size: 10px;
        cursor: pointer;

        .page-top-settings-bg {
            position: absolute;
            width: 100%;
            top: 4px;
            left: 0;
        }
    }

    .data-settings {
        position: absolute;
        top: 2px;
        left: 77%;
        width: 130px;
        line-height: 30px;
        text-align: center;
        font-weight: normal;
        font-size: 15px;
        color: #ffffff;
        font-size: 10px;
        cursor: pointer;

        .page-top-settings-bg {
            position: absolute;
            width: 100%;
            top: 4px;
            left: 0;
        }
    }

    .page-top-profile {
        display: flex;
        align-items: center;
        position: absolute;
        flex-direction: row;
        top: 16px;
        right: 65px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #0D369F;

        span {
            display: inline-block;
            position: relative;
            color: #4F98B3FF;
            width: 47px;


            img {
                position: absolute;
            }

        }
    }
}
</style>